<template>
  <view class="c-checkbox" @tap="onChange">
    <view class="icon" :class="[props.checked ? (props.fill ? 'icon-check-rectangle-filled' : 'icon-check-rectangle') : 'icon-rectangle', isDisabled ? 'disabled' : '']"></view>
    <slot></slot>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import { computed } from 'vue';

const props = defineProps({
  checked: Boolean,
  name: String,
  fill: Boolean,
  value: [String, Array, Object, Number],
  disabled: Boolean,
  color: String
});
const emit = defineEmits(['change']);
const isDisabled = computed(() => props.disabled);

const onChange = () => {
  if (isDisabled.value) {
    return;
  }
  emit('change', {
    checked: !props.checked,
    value: props.value ?? !props.checked
  });
};
</script>
<style lang="scss">
.c-checkbox {
  display: inline-flex;
  align-items: center;

  .icon {
    font-size: 36rpx;
    margin-right: 10rpx;
    width: 1em;
    height: 1em;
    display: inline-block;
    color: var(--color-primary);

    &.icon-rectangle:before {
      content: '';
      display: inline-block;
      margin-left: .1em;
      margin-bottom: .1em;
      margin-right: .1em;
      margin-top: .1em;
      width: 0.6em;
      height: 0.6em;
      border: calc(var(--onepx) * 1.5) solid var(--color-primary);
    }
  }

  .disabled.icon {
    color: var(--color-disabled) !important;
  }
}
</style>
